<template>
  <div class="rili">
    <div class="rili_header">
      <div class="left-btn" @click="prevMonthHandle">上个月</div>
      <div class="title">{{ curDate.year }}年{{ curDate.month + 1 }}月</div>
      <div class="right-btn" @click="nextMonthHandle">下个月</div>
    </div>
    <div class="main">
      <div class="main_title">
        <div class="main_title_li">日</div>
        <div class="main_title_li">一</div>
        <div class="main_title_li">二</div>
        <div class="main_title_li">三</div>
        <div class="main_title_li">四</div>
        <div class="main_title_li">五</div>
        <div class="main_title_li">六</div>
      </div>
      <div class="day">
        <div
          class="day_li"
          :class="{
            prevDay: item.month < curDate.month || item.year < curDate.year,
            nextDay: item.month > curDate.month || item.year > curDate.year,
          }"
          v-for="(item, index) in curDate.monthList"
          :key="index"
        >
          {{ item.day }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * *下一步计划
 * *怎么让月份变成我们生活习惯的月份
 * *怎么改变让星期一是第一个
 * *假设数据上有日期日程 我要怎么显示
 * *可配置的头部 slot
 * *可自定义的 日期显示
 * *把日期回传、回显
 */
import { ref, reactive, computed } from "vue";
import {
  getMonthDays,
  getMonthFirstDay,
  getPrevMonthWeekDay,
  getNextMonthWeekDay,
} from "./date";
const nowDate = ref(new Date());
const curDate = reactive({
  day: nowDate.value.getDate(),
  month: nowDate.value.getMonth(),
  year: nowDate.value.getFullYear(),
  monthList: [],
});
// 1.我们想知道一个月有几天 第三个参数是0的话 获取的就是对应上个月份的最后一天
// 月份参数是0-11
const monthDay = computed(() => {
  return getMonthDays(new Date(curDate.year, curDate.month, curDate.day));
});
// last 生成日期数组
function createMonthList() {
  // 这里是填补前面空缺的
  let prevArr = getPrevMonthWeekDay(
    new Date(curDate.year, curDate.month, curDate.day)
  );
  
  // 这是当月的
  for (let i = 1; i <= monthDay.value; i++) {
    let dayObj = {
      year: curDate.year,
      month: curDate.month,
      day: i,
    };
    curDate.monthList.push(dayObj);
  }
  // 这是下个月的
  const nextMonth = getNextMonthWeekDay(
    new Date(curDate.year, curDate.month, curDate.day)
  );
  curDate.monthList = [...prevArr, ...curDate.monthList, ...nextMonth];
}
createMonthList();

const nextMonthHandle = () => {
  curDate.month = curDate.month + 1;
  curDate.day = 1
  if (curDate.month > 11) {
    curDate.year++;
    curDate.month = 0;
  }
  curDate.monthList = [];
  console.log(curDate)
  createMonthList();
};
const prevMonthHandle = () => {
  curDate.day = 1
  curDate.month = curDate.month - 1;
  if (curDate.month < 0) {
    curDate.year--;
    curDate.month = 11;
  }
  curDate.monthList = [];
  console.log(curDate)
  createMonthList();
};
</script>

<style lang="less" scoped>
.rili {
  width: 100%;
  .rili_header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    line-height: 48px;
  }
  .main {
    width: 100%;
    box-sizing: border-box;
    background-color: #9af783;
    padding: 0 16px;
  }
  .main_title {
    width: 100%;
    background-color: #e4f620;
    display: flex;
    align-items: center;
    &_li {
      flex: 1;
      text-align: center;
      line-height: 36px;
    }
  }
  .day {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #20abf6;
    &_li {
      flex: 0 1 calc((100vw - 32px) / 7);
      text-align: center;
      line-height: 36px;
    }
    .prevDay {
      background-color: #5b5661;
    }
    .nextDay {
      background-color: #b19ace;
    }
  }
}
</style>